postcss-colormin

What is postcss-colormin?

The postcss-colormin package is a PostCSS plugin designed to optimize color values within your CSS. It reduces the size of color values and converts them into more efficient formats when possible, contributing to smaller CSS file sizes and potentially faster load times for web pages.

What are postcss-colormin's main functionalities?

Minifying color values

This feature takes a CSS string with color values and uses the colormin plugin to minimize the color values. For example, it can convert '#ff0000' to 'red', which is shorter.

"const postcss = require('postcss');
const colormin = require('postcss-colormin');

postcss([colormin()]).process('a { color: #ff0000; }').then(result => {
  console.log(result.css); // Output: 'a { color: red; }'
});"

Converting RGBA to hex when possible

This feature optimizes RGBA color values to their hex or named color equivalent when the alpha value is 1, thus reducing the size of the CSS.

"const postcss = require('postcss');
const colormin = require('postcss-colormin');

postcss([colormin()]).process('a { background-color: rgba(255, 0, 0, 1); }').then(result => {
  console.log(result.css); // Output: 'a { background-color: red; }'
});"

Other packages similar to postcss-colormin

cssnano

cssnano is a modular CSS minifier that includes various optimizations, including color minification. It uses postcss-colormin as one of its plugins, but it provides a broader range of optimizations beyond just color minification.

clean-css

clean-css is a fast and efficient CSS optimizer for Node.js and the browser. It also performs color optimizations, among other things like reordering rules and removing duplicates, but it is not a PostCSS plugin and works independently.

csso

csso is another CSS minifier that, like postcss-colormin, aims to reduce the size of CSS files. It performs structural optimizations as well as color minification, but it is not built on top of PostCSS and has its own syntax tree format.

README

postcss-colormin

Minify colors in your CSS files with PostCSS.

Install

With npm do:

npm install postcss-colormin --save

Example

var postcss = require('postcss')
var colormin = require('postcss-colormin');

var css = 'h1 {color: rgba(255, 0, 0, 1)}';
console.log(postcss(colormin()).process(css).css);

// => 'h1 {color:red}'

For more examples see the tests.

API

colormin([options])

options

legacy

Type: boolean
Default: false

Set this to true to enable IE < 10 compatibility; the browser chokes on the transparent keyword, so in this mode the conversion from rgba(0,0,0,0) is turned off.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs